import React from 'react'
import {NavLink} from 'react-router-dom'
import { connect } from 'react-redux'
import './userCenterStyle.less'

const mapStateToProps = (state) => {
  return {
    agentLevel: state.app.agentLevel,
    userInfo: state.app.userInfo,
    userFinanceInfo: state.app.userFinanceInfo,
    clubUrl: state.app.clubUrl,
    hallPage: state.app.hallPage
    
  }
}

class UserCenter extends React.Component<any, any> {
  public constructor(props) {
    super(props)

  }

  public componentDidMount() {
    // this.setState({cluburl: `${config.pre}/login/weiXin/${Cookies.get('areaCode')}?type=10106`})
  }

  public componentWillUnmount() {
    console.warn('usercentr unmount')
  }

  agentClick() {
    var host = window.location.host.match(/http/) ? window.location.host : 'https://' + window.location.host
    host = host.replace('httpd://','https://');
    window.location.href = `${host}/AgentSystem/home_page.html?areaCode=${Cookies.get('areaCode')}&token=${Cookies.get('token')}`
  }

  public render() {
    return (
      <div className="view-page user-center-view">
        <div className="usercenter-top text-center">
          <div className="holder"></div>
          <div><img className="user-center-header" src={this.props.userInfo.headUrl} alt=""/></div>
          <div className="mtr-2">{this.props.userInfo.nickname}</div>
          {/*http://img5.duitang.com/uploads/item/201410/17/20141017235209_MEsRe.thumb.700_0.jpeg  {this.props.userInfo.headUrl}*/}
          {/* <div className="mtr-2">{this.props.userInfo.nickname}<span className="agent">[{this.props.agentLevel}]</span></div> */}
          {/* <div className="mtr-3">
            <img className="user-center-diamond" src="img/userCenter/user-diamond.png?v=20181201" alt=""/>
            <span>{this.props.userFinanceInfo.amount}</span>
          </div> */}
        </div>
        <div className="usercenter-middle pure-g">
          {/* <img className="full-width" src="img/userCenter/user-kuang.png?v=20181201" alt=""/> */}
          <div className="pure-u-1-3">
            <NavLink to="/Records"><img src="img/userCenter/user-record.png?v=20181201" alt="" className="full-width"/></NavLink>
          </div>
          <div className="pure-u-1-3">
            <NavLink to="/Qualify"><img src="img/userCenter/coop-qualify.png?v=20181201" alt="" className="full-width"/></NavLink>
          </div>
          <div className="pure-u-1-3">
            <img onClick={this.agentClick} src="img/userCenter/user-agent-center.png?v=20181201" alt="" className="full-width"/>
          </div>
          <div className="pure-u-1-3">
            <NavLink to="/Rule"><img src="img/userCenter/user-rules.png?v=20181201" alt="" className="full-width"/></NavLink>
          </div>
          <div className="pure-u-1-3">
            <NavLink to="/Auth"><img src="img/userCenter/user-auth.png?v=20181201" alt="" className="full-width"/></NavLink>
          </div>
          <div className="pure-u-1-3">
            <NavLink to="/Service"><img src="img/userCenter/user-battles.png?v=20181201" alt="" className="full-width"/></NavLink>
          </div>
          {/*<div className="pure-u-1-1 text-center ranking-nav">
            <img src="img/ranking/ranking-flash.png?v=20181201" alt="" className="animated infinite fadeIn slideInLeft rank-flash"/>
            <NavLink to="/Ranking"><img src="img/userCenter/ranking.png?v=20181201" alt="" className="ranking-btn"/></NavLink>
          </div>*/}
        </div>
        {/* <div className="usercenter-bottom">
          <img className="bar" src="img/app/kuang-bottom.png?v=20181201" alt=""/>
          <div className="text"><span>个人中心</span></div>
          <NavLink to="/App"><img className="back" src="img/app/back.png?v=20181201" alt=""/></NavLink>
        </div> */}
        <div className="home-nav">
          <img src="img/app/nav-di.png?v=20181201" className="full-width pos-abs di" alt=""/>
          <div className="pure-g text-center">
          <div className="pure-u-1-4">
              <a href={this.props.hallPage}><img src="img/app/nav-mall.png?v=20181201" className="btn" alt=""/></a>
            </div>
            <div className="pure-u-1-4">
              <NavLink to="/ClubDetails"><img src="img/app/lower-club.png?v=20181201" className="btn" alt="" /></NavLink>
              {/* <a href={this.props.clubUrl}><img src="img/app/lower-club.png?v=20181201" className="btn" alt="" /></a> */}
            </div>
            <div className="pure-u-1-4">
              <NavLink to="/App"><img src="img/app/nav-home.png?v=20181201" className="btn" alt=""/></NavLink>
            </div>
            <div className="pure-u-1-4">
              <NavLink to="/UserCenter"><img src="img/app/nav-my.png?v=20181201" className="btn" alt=""/></NavLink>
            </div>
          </div>
        </div>
      </div>
    )
  }

}

export default connect(mapStateToProps)(UserCenter)